<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>asp.NET Get Data</title>
</head>

<body>
    <div id="app">
        <span>{{ Info }}</span>
        <button @click="GetResources('http://localhost:5217/api/Pizza/Get/i?i=78469')">Get Msg</button>
        <button @click="PostResources()">Post Msg</button>
    </div>
    <script type="module">
        import { createApp, ref } from "./vue.esm-browser.js";
        // const { createApp, ref } = Vue;
        const app = createApp({
            setup() {
                return {
                    Info: ref("Default"),
                    GetResources(url) {
                        fetch(url)
                            .then(res => res.text())
                            .then(text => document.getElementsByTagName("span")[0].innerHTML = text);
                    },
                    PostResources() {
                        let headers = new Headers();
                        headers.append("Content-Type", "text/json");
                        let obj = { "Id": 21, "Name": "Pizza" };
                        let req = new Request("http://localhost:5217/api/Pizza/Post", {
                            "method": "POST",
                            "mode": "cors",
                            "body": JSON.stringify(obj),
                            "headers": headers
                        });
                        fetch(req)
                            .then(response => response.json())
                            // .then(result => console.log(result));
                        // fetch("http://localhost:5000/api/Pizza/post", { "method": "POST" })
                        //     .then(res => res.text())
                        //     .then(text => document.getElementsByTagName("span")[0].innerHTML = text);
                    }
                }
            }
        });
        app.mount("#app");
    </script>
</body>

</html>